<template>
    <div class="qrcodeConent">
        <div id="qrcode"></div> <!-- 创建一个div，并设置id为qrcode -->
    </div>
</template>

<script>
import QRCode from 'qrcodejs2'
export default {
    name: 'qrcode',
    components: {
    },
    data () {
        return {
            qrcodeObj:null,
        }
    },
    created(){
    },
    methods:{
        qrcode(url) {
            this.$nextTick(() => {
                this.qrcodeObj = new QRCode('qrcode', {
                    width: 132,  
                    height: 132,
                    text: url, // 二维码地址
                    colorDark : "#000",
                    colorLight : "#fff",
                })
            })
        },
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.qrcodeConent{
    width:100%;
    display:flex;
    justify-content: center;
    margin-top:4px;
}
 #qrcode{
    display: inline-block;
 }
#qrcode img{
    width: 132px;
    height: 132px;
    background-color: #fff; 
    padding: 10px; 
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    border: 1px solid #ebeef5;
}
</style>
